<template>
  <h1>{{ msg }}</h1>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <p>{{msg1}}</p>
  <p>{{counter}}</p>
  <p>{{dobuleCounter}}</p>
  <p ref='desc'></p>


  <model-button v-model:modelState="modelState"></model-button>
</template>

<script>
import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue'
import ModelButton from './ModelButton.vue'
export default {
  components: { ModelButton },
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
      modelState: 1
    }
  },
  setup() {
    const {counter, dobuleCounter} = useCounter()
    const msg1 = ref('message')


    // desc
    const desc = ref(null)
    watch(counter, (newValue, oldValue) => {
        const p = desc.value
        p.textContent = `counter change from ${oldValue} to ${newValue}`
    })

    return {counter, dobuleCounter, msg1, desc}
  }
}


// counter 相关
function useCounter () {
  const data = reactive({
    counter: 4,
    dobuleCounter: computed(() => data.counter * 2)
  })
  let timer
  onMounted(() => {
    timer = setInterval(() => {
      data.counter ++
    }, 1000)
  })

  return toRefs(data)
}
</script>
